<template>
  <div class="departments">
    <el-card v-loading="loading" class="tree-card">
      <tree-tools
        :node-data="company"
        :is-root="false"
        style="border-bottom: 1px solid #ccc"
        @addDepts="showDaialog"
      />
      <!-- 没加props也行？ -->
      <!-- props树形控件关联的数据 默认 label 展示给用户看的  children 是进行父子节点依赖关系的属性 -->
      <!-- 默认展开default-expand-all -->
      <el-tree :data="depts" :props="defaultProps" default-expand-all>
        <!-- data是解构赋值得来的 -->
        <!-- data 就是当前行节点数据 是一个对象 -->
        <template #default=" {data}">
          <tree-tools
            :node-data="data"
            @reload="getDepartments"
            @addDepts="showDaialog"
            @editDepts="editDepts"
          />
        </template>
      </el-tree>
      <add-dept
        ref="addDeptsRef"
        :dialog-visible.sync="dialogVisible"
        :node-data="nodeData"
        :depts="depts"
        @reload="getDepartments"
      />
    </el-card>
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { getDepartmentsApi } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Departments',
  components: { treeTools, AddDept },
  data() {
    return {
      company: {
        name: '阿里巴巴（中国）有限公司',
        manager: '负责人',
        children: [],
        id: ''
      },
      // 部门列表的原始数据,树形解构
      depts: [],
      // 从tree-tools传来的，点击编辑的一行数据
      nodeData: {},
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 控制新增部门对话框的布尔值
      dialogVisible: false,
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      this.loading = true
      const {
        data: { data }
      } = await getDepartmentsApi()
      // console.log(data.depts)
      this.depts = tranListToTreeData(data.depts, '')
      // this.company = {
      //   name: data.companyName,
      //   manager: '负责人'
      // }
      this.loading = false
    },
    // 点击新增子部门展示对话框并介绍点击部门的信息
    showDaialog(nodeData) {
      this.dialogVisible = true
      // 为了add-dept能拉到pid
      this.nodeData = nodeData
      // 为了点最上面的添加子组件，添加的是根目录，因为渲染的是根据nodeData里面的id传参，所以往从companyInfo里添加id，让后tree-tools里的nodeData,就有id属性（头部与底部传的参不同），再传回来，再传到add-dept，依据id添加
      // this.company.id = ''
      this.$refs.addDeptsRef.title = '新增部门'
    },
    // 编辑部门节点
    editDepts(nodeData) {
      this.dialogVisible = true
      this.nodeData = nodeData
      // this.$refs.addDeptsRef.EditshowDialog(nodeData)
      this.$refs.addDeptsRef.getDepartDetail(nodeData.id)
      this.$refs.addDeptsRef.title = '编辑部门'
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
// 直接覆盖树形样式即可
::v-deep .el-tree {
  // 小三角的样式, 去掉默认的小三角的旋转效果
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 有子节点 且未展开 +
  .el-icon-caret-right:before {
    background: url('~@/assets/common/add.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 有子节点 且已展开 -
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url('~@/assets/common/sub.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url('~@/assets/common/man.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
}
</style>
